<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>媒体相册管理 Gallery List</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, gallery-scalable=0">
    <link rel="stylesheet" th:href="@{/statics/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/statics/style/admin.css}" media="all">
    <script th:inline="javascript">
        var path = [[${dir == null ? "/" : dir.path}]];
        var pid = [[${dir == null ? 0 : dir.id}]];
    </script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    媒体相册
                    <span style="margin-left: 30px">当前目录: [[${curPath}]]</span>
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="gallery-list-table" lay-filter="gallery-list-filter"></table>

                    <script type="text/html" id="gallery-list-table-operate-bar">
                        {{#  if(d.name != '..'){ }}
                        {{#  if(d.type == 'image' || d.type == 'video'){ }}
                        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="copyAddress"><i class="layui-icon layui-icon-about"></i>复制地址</a>
                        {{#  } }}
                        <a shiro:hasPermission="sys:gallery:edit" class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                        <a shiro:hasPermission="sys:gallery:remove" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                        {{#  } }}
                    </script>

                    <script type="text/html" id="gallery-list-table-switch-state-tpl">
                        {{#  if((d.type == 'image' || d.type == 'video'|| d.type == 'directory')&&(d.name != '..')){ }}
                        <input type="checkbox" name="deleted" lay-skin="switch" lay-filter="gallery-list-table-state"
                               value="{{ d.id }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.deleted == 0 ? 'checked' : '' }}>
                        {{#  } }}
                    </script>

                    <script type="text/html" id="gallery-list-table-view-tpl">
                        {{#  if(d.type == 'image'){ }}
                            <a href="#" lay-event="view"><i class="layui-icon">&#xe64a;</i> {{d.name}}</a>
                        {{#  } else if(d.type == 'video'){ }}
                            <a lay-event="view"><i class="layui-icon">&#xe6ed;</i> {{d.name}}</a>
                        {{#  } else if(d.type == 'directory'){ }}
                            <a lay-event="view"><i class="layui-icon">&#xe638;</i> {{d.name}}</a>
                        {{#  } else { }}
                            <a lay-event="view"><i class="layui-icon">&#xe621;</i> {{d.name}}</a>
                        {{#  } }}
                    </script>

                    <script type="text/html" id="gallery-list-table-toolbar">
                        <div class="layui-btn-container">
                            <button shiro:hasPermission="sys:gallery:add" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="createDirectory">
                                创建目录
                            </button>
                            <button shiro:hasPermission="sys:gallery:add" class="layui-btn layui-btn-sm" lay-event="addPicture">
                                添加图片
                            </button>
                            <button shiro:hasPermission="sys:gallery:add" class="layui-btn layui-btn-sm" lay-event="addVideo">
                                添加视频
                            </button>
                        </div>
                    </script>

                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/statics/layui/layui.js}"></script>
<script th:inline="none">
    layui.config({
        base: '/statics/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form',  'table'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table;

        var tableIns = table.render({
            elem: '#gallery-list-table'
            , url: '/api/gallery/list?id='+pid
            , id: 'id'
            , toolbar: '#gallery-list-table-toolbar'
            , cols: [[
                {field: 'name', title: '名称',  templet: '#gallery-list-table-view-tpl'}
                , {
                    field: 'type', width: 80, title: '类型', templet: function (d) {
                        if(d.type == 'image'){
                            return '图片';
                        }else if(d.type == 'video'){
                            return '视频';
                        }else if(d.type == 'directory'){
                          return '目录';
                        }else{
                            return '其他';
                        }
                    }
                }
                , {field: 'createTime', width: 180,sort: true, title: '修改时间', unresize: true, templet: function (d) {
                    if(d.id == 0 || d.createTime == null){
                        return '';
                    } else {
                        return d.updateTime == 'null' ? d.updateTime : d.createTime;
                    }
                }}
                , {field: 'createUser', width:150, title: '创建用户', sort: true}
                , {field: 'id', width:60, title: 'ID', unresize: true}
                , {field: 'deleted', width: 80, title: '状态', fixed: 'right', sort: true, templet: '#gallery-list-table-switch-state-tpl', unresize: true
                }
                , {width: 260, align: 'center', fixed: 'right', toolbar: '#gallery-list-table-operate-bar'}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(gallery-list-filter)', function (obj) {
            var checkStatus = table.checkStatus('id');
            switch (obj.event) {
                case 'createDirectory':
                    layer.open({
                        type: 2
                        , title: '创建目录'
                        , content: '/web/gallery/add?type=directory&path='+path+'&pid='+pid
                        , maxmin: true
                        , area: ['600px', '450px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'LAY-gallery-add-submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                var field = data.field; //获取提交的字段

                                //提交 Ajax 成功后，静态更新表格中的数据
                                $.ajax({
                                    url: '/api/gallery/add',
                                    method: 'post',
                                    data: data.field,
                                    dataType: 'JSON',
                                    success: function (res) {
                                        if (res.code == '0') {
                                            tableIns.reload(); //数据刷新
                                            layer.close(index); //关闭弹层
                                        } else {
                                            alert(res.msg);
                                        }
                                    },
                                    error: function (err) {
                                    }
                                });

                            });

                            submit.trigger('click');
                        }
                    });
                    break;
                case 'addPicture':
                    layer.open({
                        type: 2
                        , title: '添加图片'
                        , content: '/web/gallery/add?type=image&path='+path+'&pid='+pid
                        , maxmin: true
                        , area: ['600px', '450px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'LAY-gallery-add-submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                var field = data.field; //获取提交的字段

                                console.log(data);
                                //提交 Ajax 成功后，静态更新表格中的数据
                                $.ajax({
                                    url: '/api/gallery/add',
                                    method: 'post',
                                    data: data.field,
                                    dataType: 'JSON',
                                    success: function (res) {
                                        if (res.code == '0') {
                                            tableIns.reload(); //数据刷新
                                            layer.close(index); //关闭弹层
                                        } else {
                                            alert(res.msg);
                                        }
                                    },
                                    error: function (err) {
                                    }
                                });

                            });

                            submit.trigger('click');
                        }
                    });
                    break;
                case 'addVideo':
                    layer.open({
                        type: 2
                        , title: '添加视频'
                        , content: '/web/gallery/add?type=video&path='+path+'&pid='+pid
                        , maxmin: true
                        , area: ['600px', '450px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'LAY-gallery-add-submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                var field = data.field; //获取提交的字段

                                //提交 Ajax 成功后，静态更新表格中的数据
                                $.ajax({
                                    url: '/api/gallery/add',
                                    method: 'post',
                                    data: data.field,
                                    dataType: 'JSON',
                                    success: function (res) {
                                        if (res.code == '0') {
                                            tableIns.reload(); //数据刷新
                                            layer.close(index); //关闭弹层
                                        } else {
                                            alert(res.msg);
                                        }
                                    },
                                    error: function (err) {
                                    }
                                });

                            });

                            submit.trigger('click');
                        }
                    });
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(gallery-list-filter)', function (obj) {
            var data = obj.data;
            var url = data.url;
            switch (obj.event) {
                case 'copyAddress':
                    layer.open({
                        type: 1
                        , title:'复制地址并粘贴至其他地方'
                        ,offset: 'auto'
                        ,content: '<div style="padding: 10px 10px;">'+ url +'</div>'
                        ,btn: '关闭'
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0.8 //不显示遮罩
                        ,yes: function(){
                            layer.closeAll();
                        }
                    });
                    break;
                case 'view':
                    layer.load(1, {shade: 0.8});
                    if (data.type == 'image') {
                        var img = new Image();
                        img.src = url;
                        if (img.complete) {
                            imageOpen(img, data);
                        } else {
                            img.onload = function () {
                                imageOpen(img, data);
                            };
                        }
                    } else if (data.type == 'video') {
                        videoOpen(url);
                    } else if (data.type == 'directory') {
                        self.location.href = '/web/gallery/index?id=' + data.id
                    } else {
                        window.open(url);
                    }
                    break;
                case 'del':
                    layer.confirm('真的删除么', function (index) {
                        $.ajax({
                            url: '/api/gallery/remove?id=' + data.id,
                            method: 'DELETE',
                            contentType: "application/json;charset=UTF-8",
                            dataType: 'JSON',
                            success: function (res) {
                                if (res.code == '0') {
                                    layer.msg('记录已删除!', {icon: 1, time: 1000}, function () {
                                        obj.del();
                                        layer.close(index); //关闭弹层
                                    });
                                } else {
                                    layer.msg(res.msg);
                                }
                            },
                            error: function (err) {
                            }
                        });
                    });
                    break;
                case 'edit':
                    layer.open({
                        type: 2
                        , title: '编辑'
                        , content: '/web/gallery/edit?id=' + data.id
                        , maxmin: true
                        , area: ['600px', '450px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'LAY-gallery-add-submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                var field = data.field; //获取提交的字段

                                //提交 Ajax 成功后，静态更新表格中的数据
                                $.ajax({
                                    url: '/api/gallery/edit',
                                    method: 'post',
                                    data: data.field,
                                    dataType: 'JSON',
                                    success: function (res) {
                                        if (res.code == '0') {
                                            tableIns.reload(); //数据刷新
                                            layer.close(index); //关闭弹层
                                        } else {
                                            alert(res.msg);
                                        }
                                    },
                                    error: function (err) {
                                    }
                                });

                            });

                            submit.trigger('click');
                        }
                    });
                    break;
            }
        });

        form.on("switch(gallery-list-table-state)",function(obj){
            //var json = JSON.parse(decodeURIComponent($(this).data('json')));
            layer.load();
            var deleted = obj.elem.checked ? 0 : 1;
            $.ajax({
                url: '/api/gallery/state',
                method: 'post',
                data: {id : this.value , deleted : deleted},
                dataType: 'JSON',
                success: function (res) {
                    layer.closeAll();
                    if (res.code == '0') {
                        layer.msg('数据修改完成!', {icon: 1,time: 2000});
                    } else {
                        layer.msg('ERROR:数据修改错误!', {icon: 2,time: 2000});
                    }
                },
                error: function (err) {
                    layer.closeAll();
                    layer.msg('数据修改错误', {icon: 2,time: 2000});
                }
            });

            //layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

            //json = table.clearCacheKey(json);
            //console.log(json); //当前行数据
        });

        function imageOpen(img,data) {
            layer.closeAll();
            var imgRate = 1;
            if(img.width > 600 || img.height > 400){
                imgRate = img.width / 600 > img.height / 400 ? img.width / 600 : img.height / 400;
            }
            var imgWidth = img.width / imgRate;
            var imgHeight = img.height / imgRate;
            layer.open({
                type: 1
                , title: false
                , closeBtn: true
                , shade: 0.8
                , area: [imgWidth + 'px', imgHeight + 'px']
                , shadeClose: false
                , content: '<img src="' + data.url + '" width="'+ imgWidth +'" height="'+ imgHeight +'"/>'
            });
        }

        function videoOpen(url) {
            layer.closeAll();
            var loadstr='<video width="100%" height="100%"  controls="controls" style="position:fixed!important;top:0;left:0;" src="'+ url +'">Your browser does not support the video tag.</video>';
            layer.open({
                type:1,
                title: false,
                area: ['800px', '600px'],
                shade: 0.8,
                closeBtn: true,
                content: loadstr
            });
        }
    });
</script>
</body>
</html>